<template>
	<view>
		<view class="header">
			<image src="../../static/images/arrow_left.png" mode="" @click="goExhibit"></image>
			<view class="headCenter">客户主页</view>
			<view class="headRight"><image src="../../static/client/2.png" mode="" @click="goSite"></image></view>
		</view>
		<view class="photo">
			<view class="photoHead">{{ nameOne }}</view>
			<view class="photoSize">
				<view class="">{{ name }}</view>
				<view class="">{{ telephone }}</view>
			</view>
			<image src="../../static/client/3.png" mode="" @click="callPhone"></image>
		</view>
		<view class="turnover m-t20">
			<view class="turnoverLeft">总交易额</view>
			<view class="turnoverRight blue">¥{{ trade_money }}</view>
		</view>
		<view class="turnover m-t20">
			<view class="turnoverLeft">应收欠款</view>
			<view class="turnoverRight blue">¥{{ receivable }}</view>
		</view>
		<view class="turnover m-t20">
			<view class="turnoverLeft">欠货</view>
			<view class="turnoverRight blue">{{ owe_sum }}</view>
		</view>
		<view class="record">
			<view :class="{ bord: type == 0 }" @tap="changeType(0)">订单记录</view>
			<view :class="{ bord: type == 1 }" @tap="changeType(1)">收银记录</view>
			<view :class="{ bord: type == 2 }" @tap="changeType(2)">发货记录</view>
		</view>
		<!-- 发货记录 -->
		<view class="information" v-show="informationthree" v-for="item in fahuo" :key="item.operate_id" @click="goFahuo(item)">
			<view class="information-h">
				<view class="">{{ item.create_time | birtime}}</view>
				<image src="../../static/images/arrow_right.png" mode=""></image>
			</view>
			<view class="information-b">
				<view class="box-one">{{item.user_name}}</view>
				<view class="box-one qian">{{tuihuan(item.out_number)}}</view>
				<view class="box-one">{{item.out_number}}</view>
			</view>
		</view>
		<!-- 订单记录 -->
		<view class="ind-wd" v-show="wd" v-for="item in OHistory" :key="item.order_no">
			<view class="h-box">
				<view class="">订单号:{{ item.order_no }}</view>
				<image :src="fan(item)" mode=""></image>
			</view>
			<view class="b-box">
				<view class="order">{{ item.customer_name.charAt(0) }}</view>
				<view class="">
					<view class="">{{ item.customer_name }}</view>
					<view class="">{{ time(item.create_time) }}</view>
				</view>
				<view class="qian">欠货:{{ item.owe_num }}</view>
			</view>
			<view class="l-box">
				<view class="">订单金额:￥{{ item.order_sum }}</view>
				退欠货:{{ item.owe_num }}
			</view>
		</view>
		<!-- 收银记录 -->
		<view class="collection" v-show="collection" v-for="item in ringUp"  @click="goshouyin(item)">
			<image src="../../static/images/arrow_right.png" mode=""></image>
			<view class="collection-top">
				<view class="boxOne">{{ item.customer_name }}</view>
				<view class="boxtwo">{{ panduan(item) }}</view>
			</view>
			<view class="collection-bottom">
				<view class="boxOne">支付方式：{{ changeMoney(item.payment_way) }}</view>
				<view class="boxtwo">{{ time(item.create_time) }}</view>
			</view>
		</view>
		<view class="footer">
			<view class="footer-l">
				<view class="ima">
					<view class="" @click="money">
						<image src="../../static/client/8.png" mode=""></image>
						<view class="">收钱</view>
					</view>
					<view class="" @click="goShi">
						<image src="../../static/client/9.png" mode=""></image>
						<view class="">发货</view>
					</view>
					<view class="" @click="goSearch">
						<image src="../../static/client/10.png" mode=""></image>
						<view class="">退货</view>
					</view>
				</view>
			</view>
			<view class="footer-r f30 cfff tCenter"><view class="submit" @click="gobilling">开单</view></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			add: '',
			type: 0,
			informationthree: false, //发货
			wd: true, //订单
			collection: false, //银行记录
			c: '',
			name: '',
			nameOne: '',
			telephone: '',
			receivable: '',
			owe_sum: '',
			payablec: '',
			trade_money: '',
			ab: '',
			goShipments: '',
			UserO: {},
			// 订单记录
			OHistory: {},
			ringUp: {},
			fahuo:{}
		};
	},
	onShow() {
		this.UserO = uni.getStorageSync('User');
		this.orderHistory();
		this.Recordcashier();
		this.shipments()
	},
	onLoad(e) {
		// console.log(e.id);
		this.add = uni.getStorageSync('User');
		if (this.add.name == undefined) {
			this.name = this.add.customer_name;
			this.nameOne = this.add.customer_name.charAt(0);
			this.trade_money = this.add.sale_amount;
			this.receivable = this.add.sale_amount;
			this.owe_sum = this.add.sale_num;
		} else {
			this.name = this.add.name;
			this.nameOne = this.add.name.charAt(0);
			this.telephone = this.add.telephone;
			this.trade_money = this.add.trade_money;
			this.receivable = this.add.receivable;
			this.owe_sum = this.add.owe_sum;
			this.ab = this.add.rank_discount;
		}

		// console.log(this.ab);
	},
	methods: {
		fan(item) {
			if (item.order_type == 1) {
				return '../../static/images/icon_staple.png';
			}
			if (item.order_type == 2) {
				return '../../static/client/tui.png';
			}
			if (item.order_type == 3) {
				return '../../static/slice/gai.png';
			}
		},
		goFahuo(e){
			// console.log(e);
			uni.setStorage({
				key:'log',
				data:e
			})
			uni.navigateTo({
				url:'../supply/log'
			})
		},
		orderHistory() {
			this.$ajax('api/v1.order/index', {
				customer_id:this.add.customer_id
			})
				.then(res => {
					this.OHistory = res.result.page_list;
					// console.log(res);
				})
				.catch(res => {
					console.log(Error);
				});
		},
		//收银记录
		Recordcashier() {
			this.$ajax('api/v1.pay/index', {
				customer_id:this.add.customer_id
			})
				.then(res => {
					this.ringUp = res.result.page_list;
					// console.log(res);
				})
				.catch(res => {
					console.log(Error);
				});
		},
		changeType(type) {
			this.type = type;
			if (type == 0) {
				this.wd = true;
				this.informationthree = false;
				this.collection = false;
			}
			if (type == 1) {
				this.wd = false;
				this.informationthree = false;
				this.collection = true;
			}
			if (type == 2) {
				this.wd = false;
				this.informationthree = true;
				this.collection = false;
			}
		},
		user() {
			this.$ajax('api/v1.customer/info', {
					customer_id:this.add.customer_id
			})
				.then(res => {
					// console.log(res);
					const { name, telephone, receivable, owe_sum, payablec } = res.result;
				})
				.catch(res => {
					console.log(Error);
				});
		},
		callPhone() {
			uni.makePhoneCall({
				phoneNumber: this.telephone //仅为示例
			});
		},
		goExhibit() {
			uni.switchTab({
				url: '../shop/exhibit'
			});
		},
			
		goshouyin(item){
			console.log(item);
			uni.setStorage({
						key:'DetailsOfCashier',
				data:item,
		
			})
			uni.navigateTo({
				url:'DetailsOfCashier'
			})
		},
		shipments() {
				this.$ajax('api/v1.stock/index', {
			customer_id:this.add.customer_id
			})
				.then(res => {
				this.fahuo=res.result.page_list
				console.log(res);
				})
				.catch(res => {
					console.log(Error);
				});
		},
		tuihuan(e){
			if(e==0){
				return '退货'
			}else{
				return '发货'
			}
		},
		changeMoney(item) {
			if (item == 1) {
				return '现金';
			}
			if (item == 2) {
				return '支付宝';
			}
			if (item == 3) {
				return '微信';
			}
			if (item == 4) {
				return '银行卡';
			}
			if (item == 5) {
				return '其他';
			}
		},

		goSite() {
			uni.navigateTo({
				url: '../clientservice/xiugai?user=' + JSON.stringify(this.add)
			});
		},
		gobilling() {
			uni.navigateTo({
				url: '../order/billing?item=' + JSON.stringify(this.add) + '&index=' + JSON.stringify(-1)
			});
		},
		money() {
			uni.navigateTo({
				url: 'payment?item=' + JSON.stringify(this.add)
			});
		},
		goShi() {
			// console.log(this.add);
			uni.navigateTo({
				url: 'shipments?id=' + JSON.stringify(this.add)
			});
		},
		time(item) {
			return new Date(parseInt(item) * 1000).toLocaleString().substr(0, 17);
		},
		panduan(item) {
			// console.log(item);
			if (item.payment_type == 1) {
				return '+' + item.money;
			} else {
				return '-' + item.money;
			}
		},
		goSearch(){
			uni.navigateTo({
				url:'../stock/Searchforgoods'
			})
			uni.setStorage({
				key:'panduan',
				data:-5
			})
			uni.setStorage({
				key:'customer_id',
				data:this.add
			})
	uni.setStorage({
		key:'odtype',
		data:2
	})
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f7f4f8;
}
.header {
	background-color: #249af6;
	padding: 60upx 30rpx 24upx 30upx;
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
	color: #ffffff;
	image {
		width: 22rpx;
		height: 39rpx;
	}
	.headRight {
		image {
			width: 44rpx;
			height: 44rpx;
		}
	}
}
.photo {
	height: 211rpx;
	background-color: #249af6;
	padding: 40rpx 38rpx 60rpx 30rpx;
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
	color: #ffffff;
	image {
		width: 46rpx;
		height: 44rpx;
	}
	.photoSize {
		position: relative;
		left: -180rpx;
		line-height: 55rpx;
		font-size: 36rpx;
		margin-left: 100rpx;
	}
	.photoHead {
		width: 110rpx;
		height: 110rpx;
		line-height: 110rpx;
		text-align: center;
		color: #249af6;
		font-size: 48rpx;
		border-radius: 50%;
		background-color: #ffffff;
		overflow: hidden;
		image {
			width: 110rpx;
			height: 110rpx;
		}
	}
}
.turnover {
	height: 113rpx;
	padding: 0 33rpx;
	line-height: 113rpx;
	box-sizing: border-box;
	background-color: #ffffff;
	display: flex;
	justify-content: space-between;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 500;
}
.blue {
	color: #249af6;
}
.record {
	margin-top: 20rpx;
	height: 114rpx;
	background-color: #ffffff;
	display: flex;
	justify-content: space-between;
	text-align: center;
	line-height: 114rpx;
	font-size: 36rpx;
	padding: 0 20rpx;
	box-sizing: border-box;
}
.bord {
	color: #249af6;
	border-bottom: 3rpx solid #249af6;
}
.information {
	margin-top: 20rpx;
	height: 161rpx;
	background-color: #ffffff;
	padding: 0 33rpx;
	padding-top: 40rpx;
	box-sizing: border-box;
	.information-h {
		height: 60rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
		display: flex;
		justify-content: space-between;
		image {
			width: 18rpx;
			height: 33rpx;
			position: relative;
			top: 20rpx;
		}
	}
	.information-b {
		display: flex;
		justify-content: space-between;
		padding-right: 50rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}
}
.qian {
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(102, 102, 102, 1);
}
.ind-wd {
	height: 386rpx;
	background-color: #ffffff;
	margin-top: 20rpx;
	padding: 0 33rpx;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	.h-box {
		height: 103rpx;
		line-height: 103rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid #cccccc;
		image {
			width: 42rpx;
			height: 42rpx;
			margin-top: 30rpx;
		}
	}
	.b-box {
		margin-top: 21rpx;
		display: flex;
		line-height: 48rpx;
		position: relative;
		// image{
		// 	width: 100rpx;
		// 	height: 100rpx;
		// 	margin-right: 37rpx;
		// }
		.order {
			width: 100rpx;
			height: 100rpx;
			margin-right: 37rpx;
			background-color: #249af6;
			color: #ffffff;
			border-radius: 50%;
			line-height: 100rpx;
			text-align: center;
		}
		.qian {
			position: absolute;
			right: 30rpx;
			color: red;
		}
	}
	.l-box {
		display: flex;
		justify-content: space-between;
		margin-top: 50rpx;
	}
}
.collection {
	// height: 148rpx;
	background-color: #ffffff;
	margin-top: 20rpx;
	padding: 30rpx;
	box-sizing: border-box;
	padding-right: 60rpx;
	position: relative;
	image {
		width: 18rpx;
		height: 33rpx;
		position: absolute;
		right: 10rpx;
		top: 50%;
		transform: translateX(-50%);
	}
	.collection-top {
		display: flex;
		justify-content: space-between;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		.boxtwo {
			color: #249af6;
		}
	}
	.collection-bottom {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		font-size: 32rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
	}
}
.footer {
	height: 110rpx;
	width: 100%;
	position: fixed;
	bottom: 0;
	display: flex;
	background-color: #ffffff;
	.footer-l {
		width: 461rpx;
		.ima {
			display: flex;
			justify-content: space-around;
			font-size: 24rpx;
			color: #666666;
			text-align: center;

			image {
				padding: 10rpx;
				width: 43rpx;
				height: 43rpx;
			}
		}
	}
	.footer-r {
		flex: 1;
		box-sizing: border-box;
		background-color: #249af6;
		width: 260upx;
		.submit {
			height: 110upx;
			line-height: 110upx;
		}
	}
}
</style>
